<template>
	<div
		class="v-swiper-wrapper"
		:style="{ height }"
		@mouseenter.stop="handleMouseEnter"
		@mouseleave.stop="handleMouseLeave"
	>
		<div class="v-swiper-track" ref="swiperTrackRef">
			<slot></slot>
		</div>
		<ul class="v-swiper-dot">
			<li
				class="v-swiper-dot-item"
				:class="{ active: activeIndex === index }"
				v-for="(item, index) in items"
				:key="index"
				@click.stop="handleIndicatorClick(index)"
			></li>
		</ul>
		<svg
			v-if="hover"
			@click.stop="preNextHandler(1)"
			t="1651913158118"
			class="r-icon"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="8007"
			width="128"
			height="128"
		>
			<path
				d="M750.768 496.071l-431.027-438.278c-6.686-6.798-17.619-6.891-24.42-0.203-6.801 6.686-6.891 17.62-0.203 24.42l419.018 426.066-424.477 424.478c-6.743 6.743-6.743 17.678 0 24.421 3.372 3.372 7.792 5.058 12.211 5.058s8.84-1.687 12.211-5.058l436.584-436.584c6.705-6.705 6.75-17.56 0.102-24.32z"
				p-id="8008"
				fill="#ffffff"
			></path>
		</svg>
		<svg
			v-if="hover"
			@click.stop="preNextHandler(2)"
			t="1651913158118"
			class="l-icon"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="8007"
			width="128"
			height="128"
		>
			<path
				d="M750.768 496.071l-431.027-438.278c-6.686-6.798-17.619-6.891-24.42-0.203-6.801 6.686-6.891 17.62-0.203 24.42l419.018 426.066-424.477 424.478c-6.743 6.743-6.743 17.678 0 24.421 3.372 3.372 7.792 5.058 12.211 5.058s8.84-1.687 12.211-5.058l436.584-436.584c6.705-6.705 6.75-17.56 0.102-24.32z"
				p-id="8008"
				fill="#ffffff"
			></path>
		</svg>
	</div>
</template>
<script>
import Emitter from "../../assets/emitter";
import throttle from "@/utils/throttle";
export default {
	data() {
		return {
			items: [],
			activeIndex: -1,
			containerWidth: 0,
			timer: null,
			hover: false,
		};
	},
	mixins: [Emitter],
	props: {
		height: String,
		initialIndex: {
			type: Number,
			default: 0,
		},
		autoplay: {
			type: Boolean,
			default: true,
		},
		interval: {
			type: Number,
			default: 3500,
		},
		loop: {
			type: Boolean,
			default: true,
		},
	},
	provide() {
		return {
			swiper: this,
		};
	},
	created() {},
	mounted() {
		this.updateItems();
		this.$nextTick(() => {
			// this.addResizeListener(this.$el, this.resetItemPosition);
			if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
				this.activeIndex = this.initialIndex;
			}
			this.startTimer();
		});
	},
	watch: {
		items(val) {
			if (val.length > 0) this.setActiveItem(this.initialIndex);
		},

		//监听当前激活索引变化，重置子组件位置
		activeIndex(val, oldVal) {
			this.resetItemPosition(oldVal);
			if (oldVal > -1) {
				this.$emit("change", val, oldVal);
			}
		},
		autoplay(val) {
			val ? this.startTimer() : this.pauseTimer();
		},
	},
	methods: {
		//更新子组件
		updateItems() {
			this.items = this.$children.filter(
				(child) => child.$options.name === "VSwiperItem"
			);
		},
		//设置轮播定时器
		startTimer() {
			if (this.interval <= 0 || !this.autoplay || this.timer) return;
			this.timer = setInterval(this.playSlides, this.interval);
		},

		//设置当前轮播图激活索引activeIndex
		playSlides() {
			if (this.activeIndex < this.items.length - 1) {
				this.activeIndex++;
			} else if (this.loop) {
				this.activeIndex = 0;
			}
		},

		//暂停轮播图定时器
		pauseTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},

		// addResizeListener(element, fn) {
		// 	if (!element.__resizeListeners__) {
		// 		element.__resizeListeners__ = [];
		// 		element.__ro__ = new ResizeObserver(this.resizeHandler);
		// 		element.__ro__.observe(element);
		// 	}
		// 	element.__resizeListeners__.push(fn);
		// },

		//重置子组件位置
		resetItemPosition(oldIndex) {
			this.items.forEach((item, index) => {
				item.translateItem(index, this.activeIndex, oldIndex);
			});
		},

		// resizeHandler(entries) {
		// 	for (let entry of entries) {
		// 		const listeners = entry.target.__resizeListeners__ || [];
		// 		if (listeners.length) {
		// 			listeners.forEach((fn) => {
		// 				fn();
		// 			});
		// 		}
		// 	}
		// },
		setActiveItem(index) {
			if (typeof index === "string") {
				const filteredItems = this.items.filter((item) => item.name === index);
				if (filteredItems.length > 0) {
					index = this.items.indexOf(filteredItems[0]);
				}
			}
			index = Number(index);
			if (isNaN(index) || index !== Math.floor(index)) {
				console.warn("[Element Warn][Carousel]index must be an integer.");
				return;
			}
			let length = this.items.length;
			const oldIndex = this.activeIndex;
			if (index < 0) {
				this.activeIndex = this.loop ? length - 1 : 0;
			} else if (index >= length) {
				this.activeIndex = this.loop ? 0 : length - 1;
			} else {
				this.activeIndex = index;
			}
			if (oldIndex === this.activeIndex) {
				this.resetItemPosition(oldIndex);
			}
		},

		handleIndicatorClick(index) {
			this.activeIndex = index;
		},

		handleMouseEnter() {
			this.hover = true;
			this.pauseTimer();
		},

		handleMouseLeave() {
			this.hover = false;
			this.startTimer();
		},

		preNextHandler: throttle(function (type) {
			const index = type === 1 ? this.activeIndex + 1 : this.activeIndex - 1;
			this.setActiveItem(index);
		}, 350),
	},
};
</script>
<style lang="less" scoped>
.v-swiper-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	.v-swiper-track {
		display: flex;
		height: 100%;
	}
	.v-swiper-dot {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		.v-swiper-dot-item {
			width: 10px;
			height: 10px;
			margin: 0 3px;
			border-radius: 50%;
			background-color: #fff;
			&.active {
				background-color: rgb(233, 89, 22);
			}
		}
	}
	.r-icon,
	.l-icon {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 50px;
		z-index: 2;
		cursor: pointer;
	}
	.l-icon {
		left: 20px;
		transform: translateY(-50%) rotate(180deg);
	}
}
</style>
